/*
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 *
 * The Apereo Foundation licenses this file to you under the Educational
 * Community License, Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of the License
 * at:
 *
 *   http://opensource.org/licenses/ecl2.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
 * License for the specific language governing permissions and limitations under
 * the License.
 *
 */


.df-popout-button {
    box-sizing: border-box;
    @include btn(white);
    @include user-select(none);

    $icon-pseudo-position: before;
    @include fa-icon($fa-var-ellipsis-v, $icon-pseudo-position, inline-block, 0 8px 0 0, 0, inherit, 14px);

    @include transition-property(padding, visibility, opacity);
    @include transition-duration(300ms);
    @include transition-timing-function(ease-in-out);
    @include transition-delay(80ms);

    float: left;
    width: 15px;
    height: $df-height;
    visibility: hidden;
    opacity: 0;
    padding: 14px 5px;
    cursor: pointer;
    text-align: center;
    box-shadow: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    &.df-popout-active {
        box-shadow: inset 0 0 6px 2px rgba($black, 0.1);
    }

    .js-df-state-new-filter & {
        visibility: visible;
        opacity: 1;
    }
}